
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { FileText, Eye, Download } from "lucide-react";
import { Resource } from "@/types/profile";

const myResources: Resource[] = [
  {
    id: "1",
    title: "Math Teaching Materials - Quadratic Equations",
    type: "Slides",
    uploadDate: "2025-06-15",
    downloads: 45,
    size: "2.3 MB"
  },
  {
    id: "2", 
    title: "English Reading Comprehension Workbook",
    type: "Workbook",
    uploadDate: "2025-06-10",
    downloads: 28,
    size: "1.8 MB"
  },
  {
    id: "3",
    title: "Science Experiment Report Template",
    type: "Template",
    uploadDate: "2025-06-08",
    downloads: 62,
    size: "856 KB"
  }
];

export const MyResources = () => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Resources</CardTitle>
        <CardDescription>
          Manage the teaching resources you've uploaded and created
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-4">
          <Button>
            <FileText className="mr-2 h-4 w-4" />
            Upload New Resource
          </Button>
        </div>
        <div className="space-y-4">
          {myResources.map((resource) => (
            <div key={resource.id} className="border rounded-lg p-4">
              <div className="flex justify-between items-start mb-2">
                <h4 className="font-semibold">{resource.title}</h4>
                <Badge variant="secondary">{resource.type}</Badge>
              </div>
              <div className="text-sm text-muted-foreground mb-2">
                <span>Uploaded: {resource.uploadDate}</span>
                <span className="ml-4">Size: {resource.size}</span>
                <span className="ml-4">Downloads: {resource.downloads}</span>
              </div>
              <div className="flex gap-2">
                <Button size="sm" variant="outline">
                  <Eye className="mr-1 h-3 w-3" />
                  Preview
                </Button>
                <Button size="sm" variant="outline">
                  <Download className="mr-1 h-3 w-3" />
                  Download
                </Button>
                <Button size="sm" variant="outline">
                  Edit
                </Button>
                <Button size="sm" variant="destructive">
                  Delete
                </Button>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};
